<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>Home</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/style.css">
</head>
<body>

<nav class="navbar navbar-expand-lg navbar-light navbar-dark">
    <div class="container">
        <img src="img/brand-white.png" alt="" class="loge">
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
            <div class="navbar-nav">
                <a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
                <a class="nav-item nav-link" href="#">Profile</a>
                <a class="nav-item nav-link" href="#">Messages</a>
                <a class="nav-item nav-link" href="#" tabindex="-1" aria-disabled="true">Docs</a>
            </div>
        </div>
    </div>
</nav>
<div class="wrapper">
    <div class="container">
        <div class="item item-1">
            <div class="card position: relative card-1">
                <img src="img/iceland.jpg" alt="" class="img_1">
                <a href="#" class="pt-5 mb-2">Dava Gamache</a>
                <p>
                    I wish i was a little bit taller,wish i<br>
                    was a baller.
                </p>
                <img src="img/avatar-dhg.png" alt="" class="img_2">
            </div>
            <div class="card position: relative card-2">
                <h5>About</h5>
                <p class="mb-1">Went to <a href="#">Oh,Canada</a></p>
                <p class="mb-1">Became friends with <a href="#">Obama</a></p>
                <p class="mb-1">Worked at <a href="#">Github</a></p>
                <p class="mb-1">Lives in <a href="#">San Francisco,CA</a></p>
                <p class="mb-4">From <a href="#">Seattle,WA</a></p>
            </div>
            <div class="card card-3">
                <h5>photos</h5>
                <div>
                    <img src="img/instagram_5.jpg" alt="">
                    <img src="img/instagram_6.jpg" alt="">
                    <img src="img/instagram_7.jpg" alt="">
                    <img src="img/instagram_8.jpg" alt="">
                    <img src="img/instagram_9.jpg" alt="">
                    <img src="img/instagram_10.jpg" alt="">
                </div>
            </div>
        </div>
        <div class="item item-2">
            <div class="card card-4">
                <ul class="list-group list-group-flush">
                    <li class="list-group-item">
                        <h5 class="h5-1">Dava Gamache<span>4 min</span></h5>
                        <p>
                            Aenean lacina bibendum nulla sed consectetur.Vestibulum id ligula porta felis
                            euismod semper.Morbi leo risus,ports ac consectetur ac,vestibulum at eros.Cras
                            justo odio,dapibus ac facilisis in,egestas eget quam.Vestibulum id ligula porta felis
                            euismod semper.Cum sociis natoque penatibus et magnis dis parturient montes,
                            nascetur ridiculusmus.
                        </p>
                        <i>
                            <img src="img/unsplash_1.jpg" alt="">
                            <img src="img/instagram_1.jpg" alt="">
                            <img src="img/instagram_13.jpg" alt="">
                            <img src="img/unsplash_2.jpg" alt="">
                        </i>
                        <h5 class="h5-2 mt-4 mb-3">
                            Jacon Thornton:
                            <span>
                                Donec id elit non mi porta gravida at eget metus.Vivamus sagittis
                                lacus vel augue laoreet rutrum facuibus dolor auctor.Donec ullamcorper nulla non
                                metus auctor fringilla.Praesent commodo cursus magna,vel scelerisque nisl
                                consectetur et.Sed posuere consectetur est at lobortis.
                            </span>
                        </h5>
                        <h5 class="h5-2 mb-3">
                            Mark Otto:
                            <span>
                                Lorem ipsum dolor sit amet,consectetur adipiscing elit.Fusce dapibus,
                                tellus ac cursus commodo,tortor mauris condimentum nibh,ut fermentum massa
                                justo sit amet risus.
                            </span>
                        </h5>
                    </li>
                    <li class="list-group-item pb-3 pt-4">
                        <h5 class="h5-1">
                            Jacob Thornton<span>12 min</span>
                        </h5>
                        <p>
                            <span>
                                Donec id elit non mi porta gravida at eget metus.integer posuere erst a ante
                                venenatis dapibus posuere velit aliquet.Cum sociis natoque penatibus et magnis
                                dis parturient montes,nascentur ridiculus mus.Morbi leo risus,porta ac consectetur
                                ac,vestibulum at eros.Lorem ipsum dolor sit amet,consectetur adipiscing elit.
                            </span>
                        </p>
                    </li>
                    <li class="list-group-item pb-3 pt-4">
                        <h5 class="h5-1">
                            Mark Otto<span>34 min</span>
                        </h5>
                        <p class="mb-4">
                            <span>
                                Donec ullamcorper nulla non metus auctor fringilla.Vestibulum id ligula porta felis
                                euismod semper.Aenean eu leo quam.Pellentesque ornare sem lacinia quam
                                venenatis vestibulum.Etiam porta sem malesuada magna mollis euismod.Donec
                                sed odio dui.
                            </span>
                        </p>
                        <img src="img/instagram_3.jpg" alt="" class="img-3">
                        <h5 class="h5-2 mt-4">
                            Dave Gamache:
                            <span>
                                Donec id elit non mi porta gravida at eget metus.Vivamus sagittis
                                lacus vel augue laoreet rutrum faucibus dolor auctor.Donec ullamcorper nulla non
                                metus auctor fringilla.Praesent commodo cursus magna,vel scelerisque nisl
                                consectetur et.Sed posuere consectetur est at lobortis.
                            </span>
                        </h5>
                    </li>
                </ul>
            </div>
        </div>
        <div class="item item-3">
            <div class="card card-5">
                <h5 class="card-title">Sponsored</h5>
                <img src="img/instagram_2.jpg" class="card-img-top" alt="...">
                <h5 class="h5-1 mt-3">
                    It might be time to visit Iceland.
                </h5>
                <p class="mb-4">
                    <span>
                        Iceland is so chill,and evertthing<br>
                        looks cool here.Also,we heard the<br>
                        people are pretty nice.What are you<br>
                        waiting for?
                    </span>
                </p>
                <a href="#" class="btn btn-outline-primary mb-1">Buy a ticket</a>
            </div>
            <div class="card card-6">
                <ul class="list-group list-group-flush">
                    <li class="list-group-item">
                        <h5>Likes</h5>
                        <div class="div-1">
                            <img src="img/avatar-fat.jpg" alt="">
                            <div class="div-2">
                                <h5 class="h5-2">Jacob Thornton<span>@fat</span></h5>
                                <a href="#" class="btn btn-outline-primary">Follow</a>
                            </div>
                        </div>
                        <div class="div-1 mt-4">
                            <img src="img/avatar-mdo.png" alt="">
                            <div class="div-2">
                                <h5 class="h5-2">Mark Otto<span>@mdo</span></h5>
                                <a href="#" class="btn btn-outline-primary">Follow</a>
                            </div>
                        </div>
                    </li>
                    <li class="list-group-item li-1">
                        <span>
                            Dava really likes these nerds,no one<br>
                            knows why though.
                        </span>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>
<footer>
    <p>Designed and built with all the love in the world by
        <a href="#">@mdo</a>,
        <a href="#">@fat</a>,and
        <a href="#">@dhg</a>.
    </p>
    <div class="div-3">
        <a href="#">About</a>
        <a href="#">Terms</a>
        <a href="#">Privacy</a>
        <a href="#">Licenses</a>
        <a href="#">FAQ</a>
    </div>
</footer>




<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.slim.min.js"></script>
<script src="https://cdn.bootcss.com/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>


</body>
</html>